<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>带分页动态生成表格组件</title>
<script src="vue.js"></script>
<script src="pagination.js"></script>
<style>
	td,th{border:1px solid #ddd;text-align: center;height:24px;line-height: 24px;}
	table{width:50%;border:1px solid #ddd;}
	li{float:left;margin-right:8px;list-style:none;}
	a{background-color:#ccc;padding:5px 8px;cursor:pointer;}
	li.active a{background-color:#b4a2de;}
</style>
</head>
<body>
	<div id="app">
		<my-component :h-data="tableHead" :b-data="tableBody"></my-component>
		<v-pagination :page-no="pageNum" :page-size="pageSize" :total="total" :page-ctrl-num="pageCtrlNum" @change="toPage"></v-pagination>
	</div>
</body>
</html>

<script>
	var head = [
		{key:'id',name:'序号'},
		{key:'name',name:'姓名'},
		{key:'sex',name:'性别'},
		{key:'age',name:'年龄'}
	];

	var body = [
		{id:1,name:'小明',sex:'男',age:'11'},
		{id:2,name:'小红',sex:'女',age:'13'},
		{id:3,name:'小林',sex:'女',age:'9'},
		{id:4,name:'小绿',sex:'男',age:'8'},
		{id:5,name:'小明',sex:'男',age:'11'},
		{id:6,name:'小红',sex:'女',age:'13'},
		{id:7,name:'小林',sex:'女',age:'9'},
		{id:8,name:'小绿',sex:'男',age:'8'},
		{id:9,name:'小绿',sex:'男',age:'8'},
		{id:10,name:'小明',sex:'男',age:'11'},
		{id:11,name:'小林',sex:'女',age:'9'},
		{id:12,name:'小绿',sex:'男',age:'8'},
		{id:13,name:'小明',sex:'男',age:'11'},
		{id:14,name:'小红',sex:'女',age:'13'},
		{id:15,name:'小林',sex:'女',age:'9'},
		{id:16,name:'小绿',sex:'男',age:'8'},
		{id:17,name:'小绿',sex:'男',age:'8'},
		{id:18,name:'小明',sex:'男',age:'11'},
		{id:19,name:'小红',sex:'女',age:'13'},
		{id:20,name:'小林',sex:'女',age:'9'},
		{id:21,name:'小绿',sex:'男',age:'8'}
	];

	Vue.component('my-component',{
		template:'<table>' + 
					'<thead>' + 
						'<tr><th v-for="x in theadData">{{ x[\'name\'] }}</th></tr>' +
					'</thead>' +
					'<tbody>' +
						'<tr v-for="y in tbodyData">' +
							'<td v-for="z in theadData">{{ y[z.key] }}</td>' +
						'</tr>' +
					'</tbody>' +
				 '</table>',
		props:{
	  		hData:Array,
	  		bData:Array
	  	},
	  	data:function(){
	  		return{
	  			theadData: [],
	  			tbodyData: []
	  		}
	  	},
	  	mounted:function(){
	  		this.theadData = this.hData;
	  		this.tbodyData = this.bData;
	  	},
	  	updated:function(){
			this.theadData = this.hData;
	  		this.tbodyData = this.bData;
	  	},
	  	watch:{
	  		bData(a,b){
	  			this.bData = a;
	  			// console.log(a,b);
	  		}
	  	}
	});

	var app = new Vue({
		el:'#app',
		data:{
			allData:body,
			tableHead: head,
			tableBody: [],
			// tableBody:body,
			pageSize: 10,
			pageNum:1,
			total: body.length,
			pageCtrlNum:"5"
		},
		methods:{
			toPage:function(num){
				this.tableBody= [];
				this.pageNum = num;
				var index = (num-1)*this.pageSize;
				var paging = Math.ceil(this.total / this.pageSize);
				// console.log("paging=",paging);
				if(num == paging){  //当页码为最后一页时
					this.tableBody = this.allData.slice(index,this.total);
					// console.log(index,this.total - 1,this.tableBody);
				}else if(num == 1){ //当页码为1时
					this.tableBody = this.allData.slice(index,this.pageSize);
					// console.log(index,this.pageSize,this.tableBody);
				}else{
					this.tableBody = this.allData.slice(index,num * this.pageSize);
					// console.log(index,this.pageSize,this.tableBody);
				}
				
			}
		},
		beforeMount:function(){
			this.tableBody = this.allData.slice(0,this.pageSize);
			// console.log(this.tableBody);
		}
	});
</script>